<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>北京市职业介绍服务信息系统</title>
	<link rel="stylesheet" href="./styles/css/dwcp.css">
	<link rel="stylesheet" href="./styles/css/common.css">
	<link rel="stylesheet" href="./styles/css/index.css">
</head>

<body class="body">
	<include src="./include/header.html"></include>
	<!-- main 开始 -->
	<div class="main test">
		<div class="container clearfix ">
			<div class="left shadow">
				<div class="card_title">
					<h3>
						<a href="./index.html" class="go_back" title="点击返回">
							< 返回</a> | <span class="test_name">企业管理现状</span></h3>
				</div>
				<div class="test_content Test_con">
					<!-- 答题说明部分开始 -->
					<div class="test_title clearfix">
						<span class="sm">说明：</span> <span
							class="sm_tetx">本部分将从多个方面调查企业管理情况，每个问题的答案都将企业管理现状划分成了七个等级。其中，1、3、5、7 四个等级给出了明确描述，2、4、6
							三个等级，表示它介于相邻两个等级之间，请您根据自己所在企业真实情况，选择其中一个最为贴近的等级。</span>
					</div>
					<!-- 答题说明部分结束 -->
					<!-- 选项开始 -->
					<div class="ques_wrap Ques_wraps" id="J_area">
						<!-- 第一类题型开始 -->
						<script type="text/html" id="J_item1">
                            <%var quesList = data.qytms%>
                            <%for(var i = 0; i <quesList.length;i++){%>
                             <%var _first = quesList[i]%>
                        <div class="ques_item temp1" tmlb="1" num="<%=i+1%>"  data-xh="<%=_first.tmxh%>" data-tmlb="<%=_first.tmlb%>"  data-tmid="<%=_first.tmid%> "
                            <%if(_first.xzjg){%>
                                answer="<%=_first.xzjg%>"
							<%}%>>
							<h2 class="tmlb"><%=_first.tmlbmc%></h2>
                            <div class="ques_name">
                                <span class="num"><%=i+1%></span>
                                <div class="ques_detail">
                                    <p class="ques_name_text"><%=_first.tmms%></p>
                                </div>
                            </div>
                            <div class="ans_list">
                                <%for(var j = 0; j<_first.qyxxs.length;j++){%>
                                <%var _second = _first.qyxxs[j]%>
                                <div <%if(_first.xzjg ==_second.xxxh){%>
                                        class="list_item clearfix active"
                                        <%} else {%>
                                            class="list_item clearfix"
                                        <%}%> data-xx="<%=_second.xxxh%>" data-df="<%=_second.xxfz%>">
                                    <span class="item_num fLeft"><%=_second.xxxh%></span>
                                    <p class="item_ques fLeft"><%=_second.xxms%></p>
                                </div>
                                <%}%>
                            </div>
                            <p class="ques_ans">
                                <span>您选择的答案：</span>
                                <span class="Ques_ans ans_val">
                                    	<%if(_first.xzjg){%>
                                            <%=_first.xzjg%>
                                        <%}%>
                                </span>
                            </p>
                        </div>
                        <%}%>
                        <!-- 第一类题型结束 -->
                        <!-- 第二类题型开始 -->
                            <% var quesList2 = data.ygtms%>
                            <%for(var k=0;k<quesList2.length;k++){%>
							<!-- 每一项 -->
							<% var last = k == quesList2.length-1 ? '1' :'0'%>
                            <div class="ques_item temp2" islast="<%=last%>" data-tmlb="2" num="<%=quesList.length+k+1%>" >
								<%var que2 = quesList2[k]%>
								<!-- 题目列表名称--员工现状 -->
								<h2 class="tmlb"><%=que2.tmlbmc%></h2>
                                <%var opt2 = que2.ygxzs%>
                                <%for(var v=0;v<opt2.length;v++){%>
                                <%var _item = opt2[v]%>
                            <div class="q" data-tmlb="<%=que2.tmlb%>" data-tmid="<%=_item.tmid%>">
                                <div class="item_sed clearfix">
									<!-- 题号 -->
								<span class="item_option fLeft"><%=_item.tmid%></span>
								<!-- 题目说明 -->
                                <p class="item_subject fLeft"><%=_item.tmms%></p>
                                <div class="item_radio" id="form1">
                                    <label class="radio_item"><input class="radio_input" tmid="<%=_item.tmid%>" name="type<%=_item.tmid%>"
                                            type="radio" value="1"  />完全不符合 </label>
                                    <label class="radio_item"><input class="radio_input" tmid="<%=_item.tmid%>" name="type<%=_item.tmid%>"
                                            type="radio" value="2" />不符合 </label>
                                    <label class="radio_item"><input class="radio_input" tmid="<%=_item.tmid%>" name="type<%=_item.tmid%>"
                                            type="radio" value="3" />不确定 </label>
                                    <label class="radio_item"><input class="radio_input" tmid="<%=_item.tmid%>" name="type<%=_item.tmid%>"
                                            type="radio" value="4" />符合 </label>
                                    <label class="radio_item"><input class="radio_input" tmid="<%=_item.tmid%>" name="type<%=_item.tmid%>"
                                            type="radio" value="5" />完全符合 </label>
                                </div>
                            </div>
                        </div>
                        <%}%>
                    </div>
                        <%}%>
                    </script>
						<!--  -->
						<!-- 第二类题型结束 -->
					</div>
					<!-- 选项结束 -->
					<div class="test_control Test_control">
						<button class="btn J_prev btn_blue_deep" disabled>上一题</button>
						<button class="btn J_next btn_blue_deep Test_control_next">下一题</button>
						<label for="" class="input_wrap">
							<span>转至</span>
							<input type="text" class="quesnum_input J_num_input" disabled maxlength="2">
							<button class="go J_go" data-step="">GO</button>
						</label>
						<button class="btn Save_test btn_blue_deep btn_save_answer J_save_answer">提交答案</button>
					</div>
				</div>
			</div>
			<!-- 右侧公用信息 -->
			<include src="./include/rightBox.html"></include>
		</div>
	</div>
	<!-- main 结束 -->
	<include src="./include/footer.html"></include>
	<script src="./common/js/vendor.js"></script>
	<script src="./common/js/common.js"></script>
	<script>
		$(function () {
			var Load = new $.Loading();
			var cppcid = $.paramObj() && $.paramObj().cppcid;  //测评id
			var maxQuest = 0; //一共有多少题
			renderTemplate();//题目查询
			//题目查询
			function renderTemplate() {
				Load.on();
				$.asyncRender({
					type: 'get',
					url: '/zxwqy/tmxxCx',
					data: {
						cppcid: cppcid
					},
					wrap: '#J_area',
					tem: '#J_item1',
					pos: 'returnData'
				}).done(function (res) {
					Load.off();
					var result = res.returnData;
					if (+result.executeResult === 1) {
						var _data = result.qytms; //第一套题数组
						var _data1 = result.ygtms;//第二套题数组
						renderChecked(_data1); //单选回显
						//上一题 下一题按钮不能点开
						$('.Test_control *[disabled]').prop('disabled', false);
						maxQuest = _data.length + _data1.length; //一共有多少题 13

						var answerNumber; // 已经答过得题目
						answerNumber = result.ydts > 0 ? result.ydts : 1;//已经打过的题目数量

						// 如果为第一题，上一题按钮不能点
						if (answerNumber == 1) {
							$('.J_prev').prop('disabled', true); //上一题不能点击
						} else if (answerNumber == maxQuest) { //已答题目的数量如果为最后一题
							$('.J_next').prop('disabled', true); //下一题不能点击
							$('.J_save_answer').show();//提交答案显示
						}
						numText(answerNumber); //当题目数大于10，改变题目说明和现状描述
						showQuest(answerNumber); // 显示当前题目
					} else {
						$.layerMsg(_res.message, '我知道了');
					}
				})
			}
			
			//当题目数大于10，改变题目说明和现状描述
			function numText(num) {
				if (num > 10) {
					$('.test_title .sm_tetx').text('本部分将企业员工工作现状描述为3部分，每部分5道题，每道题分为5个等级，请根据贵单位实际情况选择相应的等级。')
					$('.test_name').text('员工工作现状');
				} else {
					$('.test_title .sm_tetx').text('本部分将从多个方面调查企业管理情况，每个问题的答案都将企业管理现状划分成了七个等级。其中，1、3、5、7 四个等级给出了明确描述，2、4、6 三个等级，表示它介于相邻两个等级之间，请您根据自己所在企业真实情况，选择其中一个最为贴近的等级。')
					$('.test_name').text('企业管理现状');
				}
			};
			
			//题型2的答题选项回显
			//arr 为第二套题数组
			function renderChecked(arr) {
				$.each(arr, function (k, v) {
					var _radio = $('.temp2').eq(k).find('.item_radio'); //寻找5个选项所在的的盒子
					if (v.answerArr) { 
						$('.temp2').eq(k).data('xxArr', v.answerArr)
						$.each(v.answerArr, function (i, ele) {
							_radio.eq(i).find('.radio_input').each(function (n, t) {
								if (t.value == ele.xxjg) {
									$(t).attr('checked', true);
								}
							})
						})
					}
				})
			}
			// 显示当前题目
			function showQuest(answerNumber) {
				$('.Ques_wraps .ques_item[num="' + answerNumber + '"').show();
			}

			// 题目处理，题目选中状态，答案  模板1
			$('.Ques_wraps').on('click', '.temp1 .list_item', function (e) {
				var $this = $(this);
				var activeClass = 'active';
				var quesXx = $.trim($this.data('xx'));  //ul 里面的data-xx  获取选项的选项号 1-7
				var quesDf = $.trim($this.data('df'));  //ul 里面的data-df  获取选项的选项号 1-7分  得分
				// 状态变更
				$this.siblings().removeClass(activeClass);
				$this.addClass(activeClass);
				// 设置值quesDf
				$this.parents('.ques_item').attr({
					'answer': quesXx, //选择的选项
					'df': quesDf  //得分
				})
					.find('.Ques_ans').text(quesXx);
			});

			// 下一页 分模板1/2
			$(document).on('click', '.J_next', function () {
				var _tmlb = $('.Ques_wraps .ques_item:visible').attr('tmlb');
				if (_tmlb == 1) {
					saveQuest(1)
				} else {
					saveQuest2(1)
				}
			});
			// 上一页 分模板1/2
			$(document).on('click', '.J_prev', function () {
				var _tmlb = $('.Ques_wraps .ques_item:visible').attr('tmlb');
				if (_tmlb == 1) {
					saveQuest(-1)
				} else {
					saveQuest2(-1)
				}
			});
			// go 跳转 分模板1/2
			$(document).on('click', '.J_go', function () {
				var numVal = parseInt($('.J_num_input').val(), 10);
				if (isNaN(numVal)) {
					$('.J_num_input').val('');
				} else {
					goto2(0, numVal);
				}
			});

			// 点击提交答案
			$(document).on('click', '.J_save_answer', function () {
				// 2 提交答案
				saveQuest2(1, '', function () {
					if (!confirm('是否提交答案')) return;
					$(window).off('beforeunload'); //当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。
					postSaveStatus('1').done(function () {
						alert('提交成功');
						window.location.href = './result.html';
					}).fail(function (res) {
						alert(res.message);
					})
				});


			})
			// 跳转键入 回车事件
			$('.Test_con').on('keydown', '.Test_control .J_num_input', function (e) {
				if (e.type === 'keydown' && e.keyCode === 13 && $('.own_alert_div:visible').length == 0) {
					$('.J_go').trigger('click');
				}
			});

			/**
			* 答题状态保存；答题分为：未完成0（关闭浏览器，或者走开），
			* 已完成1（在规定时间内完成题目），答题超时2
			*  @param {String} status
			*/
			function postSaveStatus(status) {
				var deferred = new $.Deferred();
				Load.on();
				$.fetch({
					type: 'post',
					url: '/zxwqy/dtztBc',
					data: {
						cppcid: cppcid,
					}
				}).always(function () {
					Load.off();
				}).done(function (response) {
					var result = response.returnData;
					if (parseInt(result.executeResult, 10) === 1) {
						deferred.resolve();
					} else {
						deferred.reject();
					}
				}).fail(function (e) {
					deferred.reject();
				});
				return deferred.promise();
			}

			//模板一
			//保存当前题目 flag 1:下一题 -1:上一题  2
			function saveQuest(flag, goNum, callback) {
				var _ele = $('.Ques_wraps .ques_item:visible');
				//answer 选项1-7
				//若没有选中答案，给出提示
				if (!_ele.attr('answer')) {
					$.layerMsg('请选择一个最为贴近的等级！', '我知道了')
					goto(flag, goNum);
					return false;
				}
				var _data = {
					cppcid: cppcid,   //测评id
					tmlb: _ele.data('tmlb'),//题目列表
					qhglth: _ele.data('xh'),  //题目序号
					qhgljg: $.trim(_ele.attr('answer')), //选择项1-7
				}
				Load.on();
				$.fetch({
					url: '/zxwqy/tmxxBc',
					type: 'POST',
					data: _data
				}).always(function () {
				}).done(function (res) {
					Load.off();
					var _res = res.returnData;
					if (+_res.executeResult == 1) {
						goto(flag, goNum); //跳转
					} else {
						$.layerMsg(_res.message, '我知道了');
						return false;
					}
				});
			}
			/**
			 * @desc 上一题 下一题 go 跳转
			 * @param {String} flag 1:下一题 -1:上一题 0:跳转 2:提交答案 
			 * @param {String} goNum 跳转
			 * */
			function goto(flag, goNum) {
				var _nowNum = $('.Ques_wraps .ques_item:visible').attr('num'); //获取题号
				if (flag == '1') {
					// 下一题 跳转下一题
					if ($('.Ques_wraps .ques_item:visible').attr('answer')) {
						$('.Ques_wraps .ques_item:visible').hide();
						$('.Ques_wraps .ques_item[num=' + (+_nowNum + 1) + ']').fadeIn();
						_nowNum = +_nowNum + 1;
					}
				} else if (flag == -1) {
					// 上一题
					$('.Ques_wraps .ques_item:visible').hide();
					$('.Ques_wraps .ques_item[num=' + (+_nowNum - 1) + ']').fadeIn();
					_nowNum = +_nowNum - 1;

				} else if (flag == '0') {
					// 跳转
					if ($('.Ques_wraps .ques_item[num=' + goNum + ']').attr('answer')) {
						$('.Ques_wraps .ques_item:visible').hide();
						$('.Ques_wraps .ques_item[num=' + goNum + ']').fadeIn();
						_nowNum = +goNum;
					} else {
						$.layerMsg('只能跳转到已经答过的题目！', '我知道了');
						return false;
					}
				}
				$('.J_save_answer').hide();
				numText(_nowNum)
				if (_nowNum == 1) { //如果为第一题 _nowNum获取题号
					$('.J_prev').prop('disabled', true);
					$('.J_next').prop('disabled', false);
				} else if (_nowNum == maxQuest) {
					$('.J_next').prop('disabled', true);
					$('.J_prev').prop('disabled', false);
					$('.J_save_answer').show();
				} else {
					$('.J_prev,.J_next').prop('disabled', false);
				}
			}
			//模板二
			//保存当前题目 flag 1:下一题 -1:上一题  2
			function saveQuest2(flag, goNum, callback) {
				var _ele = $('.Ques_wraps .ques_item:visible');
				var listArr = []; //定义5个选项数组
				if (flag != 1) { //如果不是下一题
					goto2(flag, goNum)
					return false;
				}
				var _eleList = _ele.find('.radio_input:checked');  //找出单选框被选中项
				_eleList.each(function (k, v) {
					listArr.push({
						tmid: $(v).attr('tmid'),
						xxjg: v.value
					});
				})
				if (listArr.length != 5) {
					$.layerMsg('当前有未答完的题目，请完善！', '我知道了');
					return false;
				}
				_ele.data('xxArr', listArr) //获取data-xxArr  将listArr数组中的值赋给xxArr
				var _data = {
					cppcid: cppcid,   //测评id
					tmlb: _ele.data('tmlb'),//题目列表
					ygxz: listArr
				}
				Load.on();
				$.fetch({
					url: '/zxwqy/tmxxBc',
					type: 'POST',
					data: _data
				}).always(function () {
				}).done(function (res) {
					Load.off();
					var _res = res.returnData;
					if (+_res.executeResult == 1) {
						if (callback) {
							callback();
							return false;
						}
						goto2(flag, goNum);
					} else {
						$.layerMsg(_res.message, '我知道了');
						return false;
					}
				});
			}
		/**
		 * @desc 上一题 下一题 go 跳转
		 * @param {String} flag 1:下一题 -1:上一题 0:跳转 2:提交答案 3:超时
		 * @param {String} goNum 跳转
		 * */
			function goto2(flag, goNum) {
				var _nowNum = $('.Ques_wraps .ques_item:visible').attr('num'); //获取题号

				if (flag == '1') {
					// 下一题 跳转下一题
					if ($('.Ques_wraps .ques_item:visible').data('xxArr')) {
						$('.Ques_wraps .ques_item:visible').hide();
						$('.Ques_wraps .ques_item[num=' + (+_nowNum + 1) + ']').fadeIn();
						_nowNum = +_nowNum + 1;
					}
				} else if (flag == -1) {
					// 上一题
					$('.Ques_wraps .ques_item:visible').hide();
					$('.Ques_wraps .ques_item[num=' + (+_nowNum - 1) + ']').fadeIn();
					_nowNum = +_nowNum - 1;

				} else if (flag == '0') {
					// 跳转
					if ($('.Ques_wraps .ques_item[num=' + goNum + ']').data('xxArr') || $('.Ques_wraps .ques_item[num=' + goNum + ']').attr('answer')) {
						$('.Ques_wraps .ques_item:visible').hide();
						$('.Ques_wraps .ques_item[num=' + goNum + ']').fadeIn();
						_nowNum = +goNum;
					} else {
						$.layerMsg('只能跳转到已经答过的题目！', '我知道了');
						return false;
					}
				}
				$('.J_save_answer').hide();
				numText(_nowNum)
				if (_nowNum == 1) { //如果为第一题 _nowNum获取题号
					$('.J_prev').prop('disabled', true);
					$('.J_next').prop('disabled', false);
				} else if (_nowNum == maxQuest) {
					$('.J_next').prop('disabled', true);
					$('.J_prev').prop('disabled', false);
					$('.J_save_answer').show();
				} else {
					$('.J_prev,.J_next').prop('disabled', false);
				}
			}
		});
	</script>
</body>

</html>